<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			@import url("../css/black.css");
			.xsjb-content {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				gap: 20px;
			}

			.xsjb,
			.yjzbwcl {
				border: 1px solid #ccc;
				padding: 20px;
				background-color: #eee;
				margin-bottom: 20px;
			}
			.xsjb-content > div {
				background-color: #fff;
				border: 1px solid #ccc;
				padding: 20px;
				display: flex;
				justify-content: space-between;
			}
			.yjzbwcl-content {
				display: grid;
				grid-template-columns: 1fr 1fr;
				justify-items: center;
				background-color: #fff;
			}
			.yjzbwcl-content > div {
				background-color: #fff;
				text-align: center;
				padding: 20px;
			}
			.yjzbwcl-content img {
				grid-area: a;
			}
			.yjzbwcl-content-item {
				width: 300px;
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 20px;
				grid-template-areas:
					"a a"
					"c d"
					"e f";
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 销售简报 -->
			<div class="xsjb">
				<h3>销售简报</h3>
				<div class="xsjb-content">
					<div>
						<div>
							新增线索
							<br />
							10
						</div>
						<div>
							较上月
							<br />
							<span>20%</span>
						</div>
					</div>
					<div>
						<div>
							新增线索
							<br />
							10
						</div>
						<div>
							较上月
							<br />
							20%
						</div>
					</div>
					<div>
						<div>
							新增线索
							<br />
							10
						</div>
						<div>
							较上月
							<br />
							20%
						</div>
					</div>
					<div>
						<div>
							新增线索
							<br />
							10
						</div>
						<div>
							较上月
							<br />
							20%
						</div>
					</div>
					<div>
						<div>
							新增线索
							<br />
							10
						</div>
						<div>
							较上月
							<br />
							20%
						</div>
					</div>
					<div>
						<div>
							新增线索
							<br />
							10
						</div>
						<div>
							较上月
							<br />
							20%
						</div>
					</div>
					<div>
						<div>
							新增线索
							<br />
							10
						</div>
						<div>
							较上月
							<br />
							20%
						</div>
					</div>
					<div>
						<div>
							新增线索
							<br />
							10
						</div>
						<div>
							较上月
							<br />
							20%
						</div>
					</div>
				</div>
			</div>
			<!-- 业绩指标完成率 -->
			<div class="yjzbwcl">
				<h3>业绩指标完成率</h3>
				<div class="yjzbwcl-content">
					<div class="yjzbwcl-content-item">
						<img src="holder.js/300x200" />
						<span>目标合同金额</span>
						<span>xxxxx</span>
						<span>已完成</span>
						<span>xxx</span>
					</div>
					<div class="yjzbwcl-content-item">
						<img src="holder.js/300x200" />
						<span>目标回款金额</span>
						<span>xxxxx</span>
						<span>已完成</span>
						<span>xxx</span>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/holder.js"></script>
	</body>
</html>
